import React, { Component } from 'react';
import Loadable from 'react-loadable';
import { TabBar } from 'antd-mobile';
import { connect } from 'dva';
import styles from './index.css';
// import Demo from '../../components/test';
function Loading () { 
  return <div>Loading...</div>;
}
// 成员列表
const MemberList = Loadable({
  loader: () => import('../../components/member-list'),
  loading: Loading
});
// 完善信息
const PerfectInfoComp = Loadable({
  loader: () => import('../../components/perfect-info'),
  loading: Loading
});


class Home extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      selectedTab: 'member'
    }
  }
  render () {
    const { selectedTab } = this.state;
    const { userInfo: { type } } = this.props;
    const titleText = type === 'boss' ? '牛人' : 'boss';
    return (
      <div className={styles.homePage}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <TabBar.Item
            title={titleText}
            key="member"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selected={selectedTab === 'member'}
            onPress={() => {
              this.setState({
                selectedTab: 'member',
              });
            }}
          >
            <MemberList />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="消息"
            key="newMessage"
            selected={selectedTab === 'newMessage'}
            onPress={() => {
              this.setState({
                selectedTab: 'newMessage',
              });
            }}
          >
            消息列表
          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
            selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
            title="我的"
            key="my"
            selected={selectedTab === 'my'}
            onPress={() => {
              this.setState({
                selectedTab: 'my',
              });
            }}
          >
            <PerfectInfoComp/>
          </TabBar.Item>
        </TabBar>
      </div>
    )
  }
}
function mapStateToProps ({ user }) {
  const { userInfo } = user;
  return { userInfo };
}
export default connect(mapStateToProps)(Home);